<template>
<div class="LABEL">
  <div v-if='isShow' class="label-close">
    <el-tag type="warning" v-for="item in 5" :key="item.id">标签四</el-tag>
    <i class="el-icon-caret-right" @click="openAndClose"></i>
    <hr>
  </div>
  <div v-else class="label-show">
    <el-tag type="warning" v-for="item in 14" :key="item.id">标签四</el-tag>
    <i class="el-icon-caret-right" @click="openAndClose"></i>
    <hr>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    openAndClose () {
      this.isShow = !this.isShow
    }
  },
  components: {
  }
}
</script>

<style lang='scss'>
.LABEL {
  div {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: auto;
    display:table;
    text-align: left;
    span {
      // float: center;
      margin: 8px 5px 0;
    }
    i {
      padding-left: 10px;
      opacity: 0.5;
      // animation: rotateIcon 1s linear;
    }
    hr {
        border: 0;
        height: 0; /* Firefox... */
        box-shadow: 0 0 8px 1px black;
    }
    // @keyframes rotateIcon {
    // from { transform: rotate(0deg) }
    // to {
    //     transform: rotate(360deg);
    //     transition: all 0.6s;
    // }
    // }
  }
}
.label-show {
  i {
    transform: rotate(90deg);
  }
}
</style>
